<template>
    <div class="cover__module">
        <label class="image-slot__item upload-image-border" for="cover-upload-btn" slot="error">
            <el-image :src="useImage" class="cover__item" fit="cover">
                <div class="image-slot__item" slot="error" />
            </el-image>
            <input
                :accept="accept"
                @change="checkFileHandler"
                class="item-uploader"
                id="cover-upload-btn"
                type="file"
                v-show="false"
            />
            <loadingModule tip="上传中" v-if="loading" />
        </label>
        <ul class="upload-cover-suggest">
            <li>建议上传高清封面 960 * 540</li>
            <li>合适的封面有助于增加稿件曝光,请务必上传</li>
        </ul>
        <cutImageModule
            :accept="accept"
            :image="imageFile"
            @cancel="cutImageModuleShow = false"
            @cutComplete="cutCompleteHandler"
            title="设置音频稿件封面"
            v-if="cutImageModuleShow"
        />
    </div>
</template>

<script>
import cutImageModule from "@/components/CutCoverModule/index.vue";
import loadingModule from "@/components/Loading/index.vue";
import generateOSS from "@/utils/uploadHandler";
import defaultSetting from "@/settings";
import { analysisAudio, computedSign, validateAudioFileMime } from "../utils";

export default {
    name: "AudioArchiveCoverModule",
    components: {
        cutImageModule,
        loadingModule,
    },
    props: {
        cover: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            loading: false,
            accept: "image/jpeg, image/jpg, image/png, image/bmp",
            newCover: "",
            imageFile: null,
            cutImageModuleShow: false,
        };
    },
    computed: {
        useImage() {
            const cover = this.cover;
            const host = defaultSetting.resourceHostVIP;
            const size = "?x-oss-process=image/resize,h_126/interlace,1";
            return this.newCover || host + cover + size;
        },
    },
    methods: {
        checkFileHandler(evt) {
            const file = evt.target.files[0];
            if (this.accept.indexOf(`${file.type}`) === -1) {
                this.$message.error("文件格式不正确!");
            } else {
                this.imageFile = file;
                this.cutImageModuleShow = true; // 选择文件 弹出图片剪裁框
            }
            // eslint-disable-next-line no-param-reassign
            evt.target.value = null;
        },

        previewCover(file) {
            try {
                const blob = window.URL.createObjectURL(file);
                this.newCover = blob;
            } catch (error) {
                this.newCover = file;
            }
        },

        cutCompleteHandler({ blob, file }) {
            this.cutImageModuleShow = false;
            this.previewCover(blob);
            this.uploadHandler(file);
        },

        async uploadHandler(file) {
            this.loading = true;
            const sign = computedSign(file);
            const client = await generateOSS();
            try {
                const result = await client.put(
                    `resources/cover/audio/${sign}`,
                    file,
                    {
                        headers: {
                            "x-oss-tagging": "delete=1",
                        },
                    }
                );
                this.$emit("change", result.name);
            } catch (error) {
                this.$message.error("网络错误, 封面上传失败");
            } finally {
                this.loading = false;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.cover__module {
    display: inline-block;

    .image-slot__item {
        height: 130px;
        width: 130px * (16 / 10);
        display: block;
        position: relative;
        background: url(~@/assets/images/audio_cover.png) no-repeat center;
        background-color: #fff;
        cursor: pointer;
        overflow: hidden;

        .border {
            border-style: solid;
        }

        .cover__item {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
